import { FC } from "react";
import { Box, Button, Container, Typography } from "@mui/material";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import { Link } from "react-router-dom";

// 404 页面组件
export const NotFound: FC = () => {
    return (
        <Container maxWidth="md">
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    minHeight: "70vh",
                    textAlign: "center",
                }}
            >
                <ErrorOutlineIcon sx={{ fontSize: 100, color: "error.main", mb: 2 }} />
                <Typography variant="h2" component="h1" gutterBottom>
                    404
                </Typography>
                <Typography variant="h5" color="text.secondary" paragraph>
                    抱歉，您访问的页面不存在
                </Typography>
                <Typography variant="body1" color="text.secondary" paragraph>
                    您可能输入了错误的地址，或者该页面已被移动或删除
                </Typography>
                <Button
                    variant="contained"
                    color="primary"
                    component={Link}
                    to="/"
                    sx={{ mt: 3 }}
                >
                    返回首页
                </Button>
            </Box>
        </Container>
    );
};